<template>
	<view class="chat" id="chat" :style="{height: style.contentViewHeight + 'px'}">
		 <scroll-view id="scrollview" 
		 class="chat-window" 
		 scroll-y="true" 
		 :style="{height: style.contentViewHeight + 'px'}" 
		 :scroll-with-animation="true" 
		 :scroll-top="scrollTop">
			 
		   <view class="list">
			   <template v-for="(item,index) in dataList" >
				   <view class="left m-item" v-if="item.from">
					<image :src="item.icon" class="usricon"></image>
					<view class="content">{{item.message}}</view>
				   </view>
				   
				   <view class="right m-item" v-else >		   
					<view class="content">{{item.message}}</view>
					<image :src="item.icon" class="usricon"></image>
				   </view>
			   </template>
			  
		   </view>
		   
		 
		</scroll-view>
		<view class="bottom">
					    <input class="uni-input"  v-model="message"/>
					   <button size="mini" @click="sendMessage">确定</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				　// 聊天页面时时滚动样式
				style: {
					pageHeight: 0,
					contentViewHeight: 0,
					footViewHeight: 90,
					mitemHeight: 0
				},
				scrollTop:0,
				
				message:"",
				dataList:[
					{
						icon:"../../static/ta.png",
						"message":"你好dd 的的讷讷电脑但你当你的男的女的点击88888888点击就到家点击点击点击点击交定金的就交定金的就",
						"from":1,
						"to:":0
					},
					{
						icon:"../../static/my.jpg",
						"message":"你好",
						"from":0,
						"to:":1
					},
					{
						icon:"../../static/my.jpg",
						"message":"你在干嘛",
						"from":0,
						"to:":1
					},
					{
						icon:"../../static/my.jpg",
						"message":"你在干嘛",
						"from":0,
						"to:":1
					},
					{
						icon:"../../static/my.jpg",
						"message":"你在干嘛",
						"from":0,
						"to:":1
					},
					{
						icon:"../../static/my.jpg",
						"message":"你在干嘛",
						"from":0,
						"to:":1
					},
					{
						icon:"../../static/my.jpg",
						"message":"你在干嘛",
						"from":0,
						"to:":1
					},
					{
						icon:"../../static/my.jpg",
						"message":"你在干嘛",
						"from":0,
						"to:":1
					},
					{
						icon:"../../static/my.jpg",
						"message":"你在干嘛",
						"from":0,
						"to:":1
					},
					{
						icon:"../../static/my.jpg",
						"message":"你在干嘛",
						"from":0,
						"to:":1
					},
					{
						icon:"../../static/my.jpg",
						"message":"你在干嘛",
						"from":0,
						"to:":1
					},
					{
						icon:"../../static/my.jpg",
						"message":"你在干嘛",
						"from":0,
						"to:":1
					},
					{
						icon:"../../static/my.jpg",
						"message":"你在干嘛",
						"from":0,
						"to:":1
					},
				]
			}
		},
		mounted () {
			 //获得设备信息
		　　　const res = uni.getSystemInfoSync();  
		     //获取手机可使用窗口高度     api为获取系统信息同步接口
		     console.log(res);
			 //页面高度
			 this.style.pageHeight = res.windowHeight;
			 
			 this.style.contentViewHeight = res.windowHeight - res.screenWidth / 750 * (100);
			  //像素   因为给出的是像素高度 然后我们用的是rpx  所以换算一下 
			  console.log(this.style.pageHeight )
			  console.log(this.style.contentViewHeight)
			  this.scrollToBottom();   //创建后调用回到底部方法
		　　
		　},
		onLoad() {

		},
		methods: {
          sendMessage(){
			  if(!this.message) return;
			  let obj={
			  	icon:"../../static/my.jpg",
			  	"message":this.message,
			  	"from":0,
			  	"to:":1
			  }
			this.dataList.push(obj);
			this.message="";
			this.$nextTick(function(){
			this.scrollToBottom();	
			})
			
		  },
		   scrollToBottom: function () {
				            let that = this;
							let query = uni.createSelectorQuery();
							query.selectAll('.m-item').boundingClientRect();
							query.select('#scrollview').boundingClientRect();
							query.exec((res) => {
								console.log(res);
								that.style.mitemHeight = 0;
								
								res[0].forEach((rect) => that.style.mitemHeight = that.style.mitemHeight + rect.height + 40)   //获取所有内部子元素的高度
								setTimeout(() => {
								if (that.style.mitemHeight > (that.style.contentViewHeight - 100)) {   //判断子元素高度是否大于显示高度
									that.scrollTop = that.style.mitemHeight - that.style.contentViewHeight    //用子元素的高度减去显示的高度就获益获得序言滚动的高度
								}
								}, 100)
				　　　　　　　})
					  
		            
		          }
		  
		}
	}
	
	// https://www.cnblogs.com/gongliying/p/11258189.html
</script>

<style>
	.chat{
		background-color: #F1F1F1;
	}
	.usricon{
		width: 60rpx;
		height: 60rpx;	
	}
	.list {
		display: flex;
		width: 100%;
		flex-direction: column;
	}
	.list .left{
		display: flex;
		flex-direction: row;
		padding: 20rpx;
		align-items: center;
	}
	.list .left .content{
		margin-left:15rpx;
		font-size: 30rpx;
		background-color: #FFFFFF;
		padding: 20rpx;
		position: relative;
		border-radius: 10rpx;
	}
	.list .left .content::before{
		content: "";
		/* background-color: red; */
		width: 0;
		height: 0;
		border:12rpx solid;
		position: absolute;
		top: 60rpx;
		left: -22rpx;
		border-color: transparent #fff transparent transparent;
	}
	
	.list .right{
		display: flex;
		flex-direction: row;
		padding: 20rpx;
		justify-content:flex-end;
	}
	.list .right .content{
		margin-right:15rpx;
		font-size: 30rpx;
		background-color: #4CD964;
		padding: 20rpx;
		position: relative;
		border-radius: 10rpx;
		
	}
	.list .right .content::after{
		content: "";
		/* background-color: red; */
		width: 0;
		height: 0;
		border:12rpx solid;
		position: absolute;
		top: 28rpx;
		right:-22rpx;
		border-color: transparent transparent transparent #4CD964;
	}
	
.bottom{
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	display: flex;
	padding: 20rpx;
	box-sizing: border-box;
	padding-bottom: 0;
	
	
}
.bottom input{
	flex: 1;
	border: 1px solid #DD524D;
	padding: 10rpx;
}
.bottom button{
    margin-left: 10rpx;
	background-color: #DD524D;
	color: #FFFFFF;
	border-radius: 0;
	
}
</style>
